.NavIcon {
  position: absolute;
  top: 55px;
  right: 28px;
  width: 32px;
  height: 28px;
  z-index: 9999;

  &>img {
    width: 100%;
    height: 100%;
  }
}

.planBox {
  // @touchmove.prevent 
  transition: all 0.3s;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9000000;
  overflow-y: auto;

  .plan-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    background-color: rgba(20, 18, 40, 1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    .topBox {
      width: 100%;
      height: 95px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding-top: 14px;

      &>li {
        box-sizing: border-box;

        &:nth-child(1) {
          padding-left: 33px;

          &>img {
            width: 503px;
            height: 53px;
          }
        }

        &:nth-child(2) {
          padding-right: 35px;

          &>img {
            width: 30px;
            height: 29px;
          }
        }
      }
    }

    .contentBox {
      flex: 1;
      display: flex;
      flex-direction: column;

      .activeItem {
        background-color: rgba(32, 35, 52, 1);
        border-bottom: 1px solid rgba(56, 68, 86, 1);

        .navOne {
          &>div {
            transform: rotate(90deg);
          }
        }

        &>.childrenContent {
          opacity: 1;
          height: auto;
        }
      }

      &>li {
        width: 100%;
        height: auto;
        border-bottom: 1px solid rgba(56, 68, 86, 1);
        z-index: 10;

        .navOne {
          width: 100%;
          height: 110px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0px 36px;

          &>span {
            font-size: 28px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FFFFFF;
          }

          &>div {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            transition: all 0.3s;

            &>img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .childrenContent {
          transition: all 0.3s;
          width: 100%;
          background-color: rgba(32, 35, 52, 1);
          display: flex;
          // justify-content: center;
          // align-items: center;
          flex-wrap: wrap;
          height: 0px;
          opacity: 0;

          &>li {
            width: 50%;
            height: 110px;
            display: flex;
            justify-content: center;
            align-items: center;

            &>span {
              font-size: 28px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #8F93A5;
            }
          }
        }
      }
    }
  }
}

.ShowPlan {
  // width: 100%;
  left: 0px;
}

.ClosePlan {
  left: -100%;
  // width: 0px;
  // z-index: -10000;
}

// @keyframes identifier {

// }
